import React from 'react';
import { ActivityIndicator } from 'antd-mobile';
import { isEmpty } from 'project-libs';
import OrderItem from '../Item/index';

import { OrderSkeletons } from '@/skeletons';

import { ShowLoading } from '@/components';

type Item = {
  id: string | number;
  img: string;
  name: string;
  price: string;
  createTime: string | number;
};

type Props = {
  orders: Array<Item>;
  type: number;
  showLoading: boolean;
};

const Lists: React.FC<Props> = (props) => {
  return (
    <div>
      {isEmpty(props.orders) ? (
        <OrderSkeletons />
      ) : (
        <div className="tab-lists">
          {props.orders.map((item, i) => (
            <OrderItem type={props.type} key={i} {...item} />
          ))}
          <ShowLoading showLoading={props.showLoading} />
        </div>
      )}
    </div>
  );
};

export default Lists;
